<template>

	<div class="login-section">
		<div class="ms-regis">
		<el-form label-position="top" label-width="50px" class="demo-ruleForm" :rules="rules" :model="rulesForm"
			status-icon ref="ruleForm">
			<div class="username-btn">
				
				<el-form-item  prop="username" >
					<a style="color: #5c813e;font-size: 15px;">用户名</a>
					<el-input type="text" v-model="rulesForm.username" placeholder="输入用户名，长度在3~8" ></el-input>
				</el-form-item>
			</div>
			<div class="password-btn">
				<el-form-item  prop="password"><a style="color: #5c813e;font-size: 15px;">密码</a>
					<el-input type="password" v-model="rulesForm.password" placeholder="输入密码,长度在3~10" ></el-input>
				</el-form-item>
			</div>
			<div class="repassword-btn">
				<el-form-item  prop="repassword"><a style="color: #5c813e;font-size: 15px;">确认密码</a>
					<el-input type="password" v-model="rulesForm.repassword" placeholder="再次输入密码,长度在3~10" ></el-input>
				</el-form-item>
			</div>

			<div class="question-btn">
				<el-form-item ><a style="color: #5c813e;font-size: 15px; align-self: center;">密保问题</a>
				    <el-select v-model="rulesForm.question" placeholder="请选择密保问题" style="width: 360px;" >
				      <el-option label="您父亲的名字" value="您父亲的名字"></el-option>
				      <el-option label="您母亲的名字" value="您母亲的名字"></el-option>
					  <el-option label="您的大棚名字" value="您的大棚名字"></el-option>			  
				    </el-select>
				  </el-form-item>
			</div>
			<div class="answer-btn">
				<el-form-item  prop="answer"><a style="color: #5c813e;font-size: 15px;">答案</a>
					<el-input type="text" v-model="rulesForm.answer" placeholder="输入你的答案" ></el-input>
				</el-form-item>
			</div>

			<div class="Date-btn"><a style="color: #5c813e;font-size: 15px;">当前时间: {{rulesForm.registertime}}</a></div>


			<el-form-item>
				<el-button type="success" plain	 @click="submitForm('ruleForm')" style="margin-left: 150px; width: 100px;">提交</el-button>
			</el-form-item>

		</el-form>
		</div>
	</div>




</template>
<script>
	import {
		registerinfo
	} from '../../api/index.js';
	export default {
		data() {
			return {
				 
				//存储数据的对象
				rulesForm: {
					registertime: "",
					username: '',
					password: '',
					// realName: '',
					repassword:'',
					question:'',
					answer:'',
					//registerDate: '',
				},
				rules: {
					username: [
						{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur',
						
					}, 
					{
						min: 3,
						max: 8,
						message: '用户名长度在3到8！',
						trigger: 'blur'
					},{
						validator: (rule, value, callback) => {
							  var usernamereg = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
							  //console.log(usernamereg.test(value))
							  if (usernamereg.test(value)) {
							    callback(new Error('用户名里不可包含特殊字符'))
							  }
							  else{
							    callback()
							  }
							} 
					}
					],
					answer: [{
						required: true,
						message: '答案不能为空',
						trigger: 'blur'
					}, 
					],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}, {
						min: 3,	
						message: '密码长度3-10位，不宜过短！',
						trigger: 'blur'
					},
					{
						max: 10,
						message: '密码长度3-10位，不宜过长！',
						trigger: 'blur'
					},
					{
						trigger: 'blur',
						validator: (rule, value, callback) => {
						  var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
						//  console.log(value);
						  this.rulesForm.password=value;
						 // console.log(this.rulesForm.password);
						  if (!passwordreg.test(value)) {
						    callback(new Error('密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'))
						  }
						  else{
						    callback()
						  }
						} 
					},
					],
					repassword: [{
						required: true,
						message: '输入第二次密码！',
						trigger: 'blur'
					}, {
						min: 3,
						max: 10,
						message: '两次输入的密码不一致！',
						trigger: 'blur'
					},
					{
						trigger: 'blur',
						validator: (rule, value, callback) => {
						  var repasswordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
						//  console.log(repasswordreg.test(value))
						  this.rulesForm.repassword=value;
						  if (!repasswordreg.test(value)) {
						    callback(new Error('两次输入的密码不一致'))
						  }
						  else if(this.rulesForm.repassword!=this.rulesForm.password){
							callback(new Error('两次输入的密码不一致'))  
						  }
						  else{
						    callback()
						  }
						} 
					},
					],
				},

			};
		},
		created(){
		        this.getNowTime();//进入页面调用该方法获取当前时间
		        clearInterval(myTimeDisplay );//销毁之前定时器
		        var myTimeDisplay = setInterval(() => {
		           this.getNowTime(); //每秒更新一次时间
		        }, 1000);    
		},

		methods: {
			getNowTime() {
			    var date = new Date();
			    var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds());
			    this.rulesForm.registertime = time;
			 },
			//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
			//小于10的拼接上0字符串
			 addZero(s) {
			     return s < 10 ? ('0' + s) : s;
			 },
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						registerinfo(this.rulesForm).then(res => {
							if(res.code==300){
								this.$message.error("用户名已存在");
							}else{
								localStorage.setItem('ms_username', this.rulesForm.username);
								this.$router.push('/login');
							}
							console.log(res);
						})
						
						
					} else {
						console.log('error submit!!');
						return false
					}
				});

			}
		}

	}
</script>

<style scoped>
	.login-section {
		
		/* align-items: center; */
	
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/dap_bj.jpg);
		opacity: 0.7;
		background-size: 100%;
	}
	.ms-regis{
		display: flex;
		flex-direction: column;
		align-self: center;
		
/* 		position: absolute; */
/* 		left: 50%;
		top: 40%; */
		width: 400px;
		
		border-radius: 5px;
		background:#FFFFFF;
		overflow: hidden;
	}
	.username-btn {
		justify-items: center;
		/* width: 80%; */
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
	}

	.password-btn {
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
	}
	.repassword-btn {
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
	}

	.question-btn {
		/* margin-left: 20px; */
		/* margin-right: 30px; */
		text-align: center;
	}
	
	.answer-btn{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
	}

	.Date-btn {
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
		margin-bottom: 10px;
	}
</style>